<template>
	<view class="chat-contanier">
        <scroll-view class="message-list" :scroll-y="true" :scroll-into-view="bottomId"
                     :scroll-top="scorllTop">
            <view class="message-box">
                <block v-for="(msgObj,idx) in messageList" :key="'message-'+idx">
                    <view class="message-item" :class="{'my-message':msgObj.isMe}">
                        <view class="avatar">
                            <up-avatar :src="avatarUrl" size="40" shape="square"></up-avatar>
                        </view>
                        <view>
                            <view class="user">{{msgObj.username}}</view>
                            <view class="message">{{msgObj.message}}</view>
                        </view>
                    </view>
                </block>
                <view :id="bottomId"></view>
            </view>
            
        </scroll-view>
        <view class="input-box">
            <view class="btn" @click="handlerNone"> 
                <up-icon name="mic" size="20" ></up-icon>
            </view>
            <view class="input-content">
                <up-input
                    placeholder="请输入内容"
                    border="surround"
                    shape="circle"
                    v-model="message"
                    @change="handlerInputChange"
                    @confirm="handleSend"
                ></up-input>
            </view>
            <view class="btn" v-if="!isEdit" @click="handlerNone">
                <up-icon name="plus" size="20"></up-icon>
            </view>
            <view class="btn-send" v-if="isEdit"> 
                <up-button color="#f8744d" @click="handleSend">发送</up-button>
            </view>
        </view>
    </view> 
</template>

<script lang="ts">
	export default {
        name:"LoginForm", 
        components:{},
        options: { styleIsolation: 'shared' },
        props:{},
        data(){
            return {
                bottomId:"",
                scorllTop:0,
                message:"",
                isEdit:false,
                avatarUrl:"https://uview-plus.jiangruyi.com/h5/static/uview/album/2.jpg",
                messageList:[
                    {
                        username:"RogerH",
                        message:"你好老哥",
                        isMe:true
                    },
                    {
                        username:"RogerH",
                        message:"你好老哥",
                        isMe:false
                    }
                ]
            }
        },
		onShow() {
		},
        methods:{
            handlerNone(){
                uni.showToast({
					title:"别点了 没用的"
				})
            },
            handlerInputChange(e){
                this.isEdit=e.length>0
            },
            handleSend(){
                let sendObj={
                    username:"RogerH",
                    message:this.message,
                    isMe:true
                }
                this.messageList.push(sendObj)
                this.message=""
                this.isEdit=false
                this.bottomId="message-"+this.messageList.length
            }
        }
    } 
	
</script>

<style lang="scss" scoped>
    .message-list{
        height: 956rpx;
    }
    .message-item{
        display: flex;
        margin: 20upx;
        .user{
            font-size: 24upx;
            color:$uni-text-color-placeholder;
        }
        .message{
            background: #fff;
            padding: 20upx;
            margin: 20upx 0;
            border-radius: 20upx;
        }
        .avatar{
            margin-right: 20upx ;
        }
    }
    .my-message{
        flex-direction: row-reverse;
        .avatar{
            margin-right: 0;
            margin-left: 20upx ;
        }
        .user{
            text-align: right;
        }
        .message{
            background-color: $uni-color-primary;
        }
    }
    .input-box{
		display: flex;
		align-items: center;
		background: #fff;
		position: absolute;
		bottom: 0;
		width: 100%;
		.input-content{
			width: 100%;
		}
		.btn{
			border: 4upx solid #9e9e9e;
			border-radius: 50%;
			padding: 4upx;
			margin: 20upx 20upx;
		}
        .btn-send{
            margin: 0 8upx;
        }
	}

</style>
